<template>
  <div class="pie">
    <div ref="main" class="main" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted () {
    // console.log(this.$refs.main);
    const myChart = echarts.init(this.$refs.main)
    // 绘制图表
    myChart.setOption({
      // 图例
      legend: {
        top: '30%', // 垂直安放位置
        left: '50%', // 水平安放位置
        orient: 'vertical', // 布局方式，默认为水平布局
        itemWidth: 10, // 图例图形宽度
        itemHeight: 10 // 图例图形高度
      },
      // 准备配置项数据
      series: [
        {
          type: 'pie',
          radius: ['20%', '50%'], // 饼图的半径
          center: ['20%', '60%'], // 饼图的位置
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '16'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '2k-6K:            10%' },
            { value: 735, name: '3k-7K:             10%' },
            { value: 580, name: '4k-8K:             10%' },
            { value: 484, name: '5k-10K:            10%' },
            { value: 300, name: '10k-15K:           10%' }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less" ,scoped>
.pie {
  display: flex;
  .main {
    height: 200px;
    width: 100%;
    justify-content: left;
  }
}
</style>
